<template>
  <view 
    class="plan-card"
    :class="{ completed: plan.completed }"
    @touchstart="touchStart"
    @touchend="touchEnd"
  >
    <!-- 卡片内容 -->
    <view class="card-content" @click="handleCardClick">
      <view class="card-header">
        <text class="title" :class="{ 'completed-text': plan.completed }">
          {{ plan.title || '未命名计划' }}
        </text>
        <view class="priority" :class="plan.priority"></view>
      </view>
      
      <text class="content-preview" v-if="plan.content">
        {{ plan.content.substring(0, 30) }}{{ plan.content.length > 30 ? '...' : '' }}
      </text>
      
      <!-- 子任务进度 -->
      <view class="subtasks-progress" v-if="plan.subTasks && plan.subTasks.length > 0">
        <progress 
          :percent="completedSubtasksPercent" 
          activeColor="#87CEEB" 
          backgroundColor="#e0e0e0"
          stroke-width="4"
        />
        <text class="progress-text">
          {{ completedSubtasksCount }}/{{ plan.subTasks.length }} 完成
        </text>
      </view>
      
      <!-- 日期标签 -->
      <view class="date-tag" v-if="plan.createdAt">
        <uni-icons type="calendar" size="12" color="#666"></uni-icons>
        <text>{{ formatDate(plan.createdAt) }}</text>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons" v-if="showActions">
      <view class="btn complete" @click.stop="toggleComplete">
        <uni-icons 
          :type="plan.completed ? 'refresh' : 'checkmarkempty'" 
          size="20" 
          :color="plan.completed ? '#666' : '#2775b6'"
        ></uni-icons>
        <text>{{ plan.completed ? '重置' : '完成' }}</text>
      </view>
      <view class="btn delete" @click.stop="confirmDelete">
        <uni-icons type="trash" size="20" color="#f5222d"></uni-icons>
        <text>删除</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { usePlanStore } from '@/stores/planStore'

const props = defineProps({
  plan: {
    type: Object,
    required: true
  },
  folderName: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['edit'])

const planStore = usePlanStore()
const showActions = ref(false)
const touchTimer = ref(null)

// 计算完成的子任务百分比
const completedSubtasksPercent = computed(() => {
  if (!props.plan.subTasks || props.plan.subTasks.length === 0) return 0
  const completed = props.plan.subTasks.filter(t => t.completed).length
  return Math.round((completed / props.plan.subTasks.length) * 100)
})

// 计算完成的子任务数量
const completedSubtasksCount = computed(() => {
  return props.plan.subTasks ? props.plan.subTasks.filter(t => t.completed).length : 0
})

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return `${date.getMonth() + 1}月${date.getDate()}日`
}

// 触摸开始
const touchStart = () => {
  touchTimer.value = setTimeout(() => {
    showActions.value = true
  }, 500)
}

// 触摸结束
const touchEnd = () => {
  clearTimeout(touchTimer.value)
}

// 卡片点击
const handleCardClick = () => {
  if (!showActions.value) {
    emit('edit', props.plan.id)
  }
  showActions.value = false
}

// 切换完成状态
const toggleComplete = () => {
  planStore.togglePlanComplete(props.plan.id)
  showActions.value = false
}

// 确认删除
const confirmDelete = () => {
  uni.showModal({
    title: '删除计划',
    content: '确定要删除这个计划吗？',
    success: (res) => {
      if (res.confirm) {
        planStore.deletePlan(props.plan.id)
      }
    }
  })
}
</script>

<style scoped>
.plan-card {
  background-color: white;
  border-radius: 12px;
  margin: 12px 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.plan-card.completed {
  opacity: 0.8;
}

.card-content {
  padding: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  flex: 1;
}

.completed-text {
  text-decoration: line-through;
  color: #999 !important;
}

.priority {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 8px;
}

.priority.high {
  background-color: #f5222d;
}

.priority.medium {
  background-color: #faad14;
}

.priority.low {
  background-color: #52c41a;
}

.content-preview {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 12px;
}

.subtasks-progress {
  margin: 8px 0;
}

.progress-text {
  font-size: 12px;
  color: #666;
  display: block;
  text-align: right;
}

.date-tag {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

.date-tag text {
  margin-left: 4px;
}

.action-buttons {
  display: flex;
  border-top: 1px solid #f0f0f0;
}

.action-buttons .btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: background-color 0.2s;
}

.action-buttons .btn.complete {
  border-right: 1px solid #f0f0f0;
}

.action-buttons .btn:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.action-buttons .btn text {
  font-size: 12px;
  margin-top: 4px;
}
</style>